<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" style="height: 100%; ">
<head>
	<title>Filter-This JS Plugin</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<link rel="icon" type="image/x-icon" href="images/favicon.ico">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
	 $(document).ready(function() {

    /* Max filter elements */
	
	var max = $("ul#portfolio li").size();
	
	$("#filter-items").text(max);
	
	$("#filter-max").text(max);

	
	/* Tag filter */
	
	$('ul#filter a').click(function() {
		
		var count = 0;
		
		//$(this).css('outline','none');
		
		//$('ul#filter .current').removeClass('current');
		
		//$(this).parent().addClass('current');
		
		var filterVal = $(this).text().toLowerCase().replace(' ','-');
				
		if(filterVal == 'all') {
			
			$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
		
		} 
		
		else {
			
			$('ul#portfolio li').each(function() {
				
				if(!$(this).hasClass(filterVal)) {
					
					$(this).slideUp('slow').addClass('hidden');
				
				} 
				
				else {
					
					$(this).slideDown('slow').removeClass('hidden');
					
					count++;
					
				}
			
			});
			
			$("#filter-items").text(count);
		
		}
		
		return false;
		
	});

	/* Search Filter 
	
	$("#search").keyup(function () {
        
		var filter = $(this).val();
		
		var count = 0;
		
		if(filterVal == 'all') {
			
			$('ul#portfolio li.hidden').slideDown('slow').removeClass('hidden');
		
		} 
		
		else {
        
			$("ul#portfolio li").each(function () {
		
				if ($(this).text().search(new RegExp(filter, "i")) < 0) {
					
					$(this).addClass("hidden");
					
				} else {
					
					$(this).removeClass("hidden");
					
					count++;
					
				}
			}
			
        });
		
        $("#filter-items").text(count);
		
		return false;
		
    });*/
	
	/* Reset filter */
	

	});
	</script>
</head>

<body>


<!-- Content container -->

<div id="container">


	<!-- Count filtered items -->
	
	<div id="topbar">
		
		<div id="topbarinfo">
			
			Wanna connect? Check us out on <a href="http://www.facebook.com/pages/Kreativ-Theme/194262107289587">Facebook</a>, <a href="http://twitter.com/#!/kreativtheme">Twitter</a> or <a href="https://plus.google.com/114270988403715451308">Google+</a>. Thank you!
			
		</div>
	
	</div>
	
	
	<!-- Header -->

	<div id="header_main">

		<div id="title">
		
			<div id="name">
			
				<a href="" title="Filter This">Filter-This!</a>
				
			</div>
			
			<div id="description">JQuery & Wordpress Plugin</div>
			
		</div>

	</div>		
		

	<div id="page">
	
		<div id="menu">
		
			<div id="horizontal">
			
				Horizontal<br/>
				
				<ul id="filter">
			
					<li><a href="# title="Art gallery Wordpress Themes">Art</a></li>
					
					<li><a href="#" title="Bussines Wordpress Themes">Bussines</a></li>
					
					<li><a href="#" title="Wordpress Themes with CMS like features">CMS</a></li>
					
					<li><a href="#" title="Free Wordpress Themes">FREE</a></li>
					
					<li><a href="#" title="Mobile Wordpress Themes">Mobile</a></li>
					
					<li><a href="#" title="Portofolio Wordpress Themes">Portofolio</a></li>
				
				</ul>
				
			</div>
			
			<div id="dropdown">
			
				Dropdown<br/>
				
				<ul id="filter">

					<li><a href="#" title="Themes">Themes <img src="./images/arrow.png" alt="Arrow" /></a>
							
						<ul>
						
							<li><a href="#" title="Art themes">Art</a></li>
					
							<li><a href="#" title="Bussines themes">Bussines</a></li>
					
							<li><a href="#" title="CMS themes">CMS</a></li>
					
							<li><a href="#" title="Free themes">FREE</a></li>
					
							<li><a href="#" title="Mobile themes">Mobile</a></li>
					
							<li><a href="#" title="Portofolio themes">Portofolio</a></li>					
							
						</ul>					
					
					</li>
						
				</ul>		
							
			</div>
			
			<div id="search">
			
				Search<br/>
						
				<ul id="filter">
				
					<li><input id="searchfield" name="search" size="15"></li>
					
				</ul>
				
			</div>

			<div id="reset">
			
				Filter<br/>
				
				<ul id="filter">
				
					<li><a href="#reset">Reset</a></li>
					
				</ul>
				
			</div>
		
		</div>
		
		
		<!-- Count filtered items -->
	
		<div id="count">
		
			Showing <span id="filter-items"></span> out of <span id="filter-max"></span></span>
		
		</div>
		
	
		<!-- Items to be filtered -->
	
		<ul id="portfolio">
		
			<li class="reset blogging themes themefuse writer ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-writer" rel="bookmark" title="ThemeFuse Writer">				 
					
					Writer Theme
					
					<img src="./images/themefuse-writer.png" alt="ThemeFuse Writer" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-writer" target="_blank" title="BUY ThemeFuse Writer Theme"> Download Theme </a>
				
				</div>
				
			</li>

			
			<li class="reset bussines themes brand-crafters themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-brand-crafters" rel="bookmark" title="ThemeFuse Brand Crafters">				 
					
					Brand Crafters Theme
					
					<img src="images/themefuse-brand-crafters.png" alt="ThemeFuse Brand Crafters" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-brand-crafters" target="_blank" title="BUY ThemeFuse Brand Crafters Theme">Download Theme</a>
				
				</div>
				
			</li>

			
			<li class="reset bussines portofolio themes qlassik themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-qlassik" rel="bookmark" title="ThemeFuse Qlassik">				 
					
					Qlassik Theme
					
					<img src="images/themefuse-qlassik.png" alt="ThemeFuse Qlassik" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-qlassik" target="_blank" title="BUY ThemeFuse Qlassik Theme">Download Theme</a>
				
				</div>
				
			</li>

			
			<li class="reset magazine themes lifestyle themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-lifestyle" rel="bookmark" title="ThemeFuse LifeStyle">				 
					
					LifeStyle Theme
					
					<img src="images/themefuse-lifestyle.png" alt="ThemeFuse LifeStyle" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-lifestyle" target="_blank" title="BUY ThemeFuse LifeStyle Theme">Download Theme</a>
				
				</div>
				
			</li>

			
			<li class="reset hotel themes themefuse welcome-inn ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-welcome-inn" rel="bookmark" title="ThemeFuse Welcome Inn">				 
					
					Welcome Inn	Theme
					
					<img src="images/themefuse-welcome-inn.png" alt="ThemeFuse Welcome Inn" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-welcome-inn" target="_blank" title="BUY ThemeFuse Welcome Inn Theme">Download Theme</a>
				
				</div>
				
			</li>

			
			<li class="reset art photography themes freshfolio themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-freshfolio" rel="bookmark" title="ThemeFuse Freshfolio">				 
					
					Freshfolio Theme
					
					<img src="images/themefuse-freshfolio.png" alt="ThemeFuse Freshfolio" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-freshfolio" target="_blank" title="BUY ThemeFuse Freshfolio Theme">Download Theme</a>
				
				</div>
				
			</li>

			
			<li class="reset bussines cms themes envision free themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-envision" rel="bookmark" title="ThemeFuse Envision">				 
					
					Envision Theme
					
					<img src="images/themefuse-envision.png" alt="ThemeFuse Envision" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-envision" target="_blank" title="BUY ThemeFuse Envision Theme">Download Theme</a>
				
				</div>
				
			</li>

			
			<li class="reset art portofolio themes themefuse web-studio ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-web-studio" rel="bookmark" title="ThemeFuse Web Studio">				 
					
					Web Studio Theme
					
					<img src="images/themefuse-web-studio.png" alt="ThemeFuse Web Studio" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-web-studio" target="_blank" title="BUY ThemeFuse Web Studio Theme">Download Theme</a>
				
				</div>
				
			</li>

			
			<li class="reset bussines portofolio themes exquisite-works themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-exquisite-works" rel="bookmark" title="ThemeFuse Exquisite Works">				 
					
					Exquisite Works	Theme
					
					<img src="images/themefuse-exquisite-works.png" alt="ThemeFuse Exquisite Works" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-exquisite-works" target="_blank" title="BUY ThemeFuse Exquisite Works Theme">Download Theme</a>
				
				</div>
				
			</li>

			
			<li class="reset bussines themes clean-classy-corporate themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-clean-classy-corporate" rel="bookmark" title="ThemeFuse C3">				 
					
					Clean Classy Corporate Theme				
					
					<img src="images/themefuse-clean-classy-corporate.png" alt="ThemeFuse C3" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-clean-classy-corporate" target="_blank" title="BUY ThemeFuse C3 Theme">Download Theme</a>
				
				</div>
				
			</li>
			
			<li class="reset art themes art-gallery themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-art-gallery" rel="bookmark" title="ThemeFuse Art Gallery">				 
					
					Art Gallery	Theme
					
					<img src="images/themefuse-art-gallery.png" alt="ThemeFuse Art Gallery" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-art-gallery" target="_blank" title="BUY ThemeFuse Art Gallery Theme">Download Theme</a>
				
				</div>
				
			</li>
			
			<li class="reset portofolio themes creative-juice themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-creative-juice" rel="bookmark" title="ThemeFuse Creative Juice">				 
					
					Creative Juice Theme
					
					<img src="images/themefuse-creative-juice.png" alt="ThemeFuse Creative Juice" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-creative-juice" target="_blank" title="BUY ThemeFuse Creative Juice Theme">Download Theme</a>
				
				</div>
				
			</li>
			
			<li class="reset apps mobile themes siliconapp themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-siliconapp" rel="bookmark" title="ThemeFuse SiliconApp">				 
					
					SiliconApp Theme
					
					<img src="images/themefuse-siliconapp.png" alt="ThemeFuse SiliconApp" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-siliconapp" target="_blank" title="BUY ThemeFuse SiliconApp Theme">Download Theme</a>
				
				</div>
				
			</li>
			
			<li class="reset portofolio themes medica themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-medica" rel="bookmark" title="ThemeFuse Medica">				 
					
					Medica Theme
					
					<img src="images/themefuse-medica.png" alt="ThemeFuse Medica" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-medica" target="_blank" title="BUY ThemeFuse Medica Theme">Download Theme</a>
				
				</div>
				
			</li>
			
			<li class="reset portofolio themes medica themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-medica" rel="bookmark" title="ThemeFuse Medica">				 
					
					Mobility App
					
					<img src="images/themefuse-mobility-app.png" alt="ThemeFuse Medica" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-medica" target="_blank" title="BUY ThemeFuse Medica Theme">Download Theme</a>
				
				</div>
				
			</li>

			<li class="reset portofolio themes medica themefuse ">
				
				<div class="center">
					
					<a href="http://www.kreativtheme.com/themefuse-medica" rel="bookmark" title="ThemeFuse Medica">				 
					
					Bon Apetit
					
					<img src="images/themefuse-bon-apetit.png" alt="ThemeFuse Medica" width="215" height="121">
								
					</a>
					
				</div>
				
				<div class="cart">
					
					<a href="http://www.kreativtheme.com/go/themefuse-medica" target="_blank" title="BUY ThemeFuse Medica Theme">Download Theme</a>
				
				</div>
				
			</li>			
				
		</ul>
	
	</div>
	

	<!-- Footer content -->
	
	<div id="footer">

		<a href="http://www.kreativtheme.com/about">About Kreativ Theme</a> ©2011 | <a href="http://www.kreativtheme.com/contact">Contact</a>: info<img src="./images/at.png">kreativtheme.com	

	</div>
	
</div>

</body>

</html>